<template>
	<view>
		<popup ref="alter" position="center">
			<view class="login1User">
				<view class="space120 pos flex_center flex_items">
					<view class="f40 c0 bold">查看我的报名</view>
					<image @click="close" class="loginUser_close" src="../../images/close.png"></image>
				</view>
				<view class="p30 box_b">
					<view class="mt30">
						<view class="f30 c3 bold">手机号</view>
						<view class="edit_inpBox flex_between flex_items pr30 box_b">
							<input v-model="phone" class="edit_inpt plr20 flex_start flex_items box_b f30" type="number"
								placeholder="请输入手机号" maxlength="11" placeholder-class="c9" />
						</view>
					</view>
					<view class="mt30 pt10">
						<view class="f30 c3 bold">验证码</view>
						<view class="edit_inpBox flex_between flex_items pr30 box_b">
							<input v-model="code" class="edit_inpt plr20 flex_start flex_items box_b f30" type="number"
								maxlength="5" placeholder="请输入验证码" placeholder-class="c9" />
							<view @click="send1Code()" v-if="isClickSendBtn" class="f28 flex_shrink pl30 box_b color2">
								获取验证码</view>
							<view v-else class="f32 c6 flex_shrink">{{ send_btn_text }}秒</view>
						</view>
					</view>

					<view @click="save" v-if="isClick" class="edit_btn flex_center flex_items f32 cf">确定</view>
					<view v-if="!isClick" class="edit_btn flex_center flex_items bgccc">
						<view class="loading spin"></view>
						<view class="f32 cf ml30 pl10">确定</view>
					</view>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	let common = getApp().globalData.commonFun;
	let util = getApp().globalData.utilFun;
	import popup from '@/components/popup/popup.vue';
	export default {
		components: {
			popup
		},
		data() {
			return {
				imghttp: uni.getStorageSync('imghttp'),
				phone: "",
				code: '',
				isClickSendBtn: true,
				time: 60,
				interval: null,
				send_btn_text: '',
				isClick: true,
			};
		},
		
		created() {
			// let that = this;
			// setTimeout((rs) => {
			// 	that.$refs.alter.show();
			// }, 2000)
		},
		methods: {
			show() {
				this.isClick = true;
				this.isClickSendBtn = true;
				this.time = 60;
				this.phone = "";
				this.code = "";
				this.send_btn_text = "";
				this.interval = null;
				this.$refs.alter.show();
			},
			close() {
				this.$refs.alter.hide();
			},
			async save() {
				if (!this.isClick) return;
				if (this.phone === '') {
					common.showTimeToast('请输入手机号', 2000);
					return;
				}
				if (this.code === '') {
					common.showTimeToast('请输入验证码', 2000);
					return;
				}
				let val = {
					phone: this.phone,
					code: this.code
				}
				let url = 'arts/checkPhone';
				common.showLoading("...");
				this.isClick = false;
				let res = await util.httpRequest(url, val, "POST");
				common.hideLoading();
				this.isClickSendBtn = true;
				this.isClick = true;
				if (res.result == "fail") {
					common.showTimeToast(res.msg);
					return;
				}
				common.showTimeToast("验证成功");
				common.setStorage("phone", this.phone);
				this.close();
				setTimeout((rs) => {
					uni.redirectTo({
						url: "/pages/enrollRecord/enrollRecord"
					})
				}, 2000)
			},
			/**
			 * 发送验证码
			 */
			async send1Code() {
				let that = this;
				if (!this.isClickSendBtn) return;
				if (this.phone === '') {
					common.showTimeToast('请输入手机号', 2000);
					return;
				}
				let val = {
					phone: this.phone
				};

				common.showLoading("发送中...")
				let url = 'arts/sendCode';
				let res = await util.httpRequest(url, val, "POST");
				common.hideLoading();
				if (res.result === 'success') {
					common.showTimeToast('发送成功');
					this.settime();
				} else {
					common.showTimeToast(res.msg);
					this.isClickSendBtn = true;
				}
			},
			//倒计时
			settime() {
				let that = this;
				this.interval = setTimeout(() => {
					let t = that.time;
					let txt = that.send_btn_text;
					if (t === 0) {
						txt = '发送验证码';
						t = 60;
						that.isClickSendBtn = true;
						clearTimeout(that.interval);
					} else {
						txt = t;
						t -= 1;
						that.settime();
						that.isClickSendBtn = false;
					}
					that.time = t;
					that.send_btn_text = txt;
				}, 1000);
			},
		}
	};
</script>

<style scoped>
	.login1User {
		width: 630rpx;
		background: #ffffff;
		border-radius: 30rpx;
		margin: 0 auto;
	}

	.loginUser_close {
		width: 24rpx;
		height: 24rpx;
		margin: 30rpx;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;
	}

	.edit_inpBox {
		width: 570rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		background: #f8f8f8;
	}

	.edit_inpt {
		height: 100rpx;
	}

	.edit_btn {
		width: 570rpx;
		height: 90rpx;
		margin: 60rpx auto;
		background: #15a183;
		border-radius: 45rpx;
	}
</style>